import './index.scss';

import { Layout } from 'antd';
import Content from './components/Content';
import LayoutHeader from './components/Header/index.tsx';
import LayoutSider from './components/Sider';
import LayoutStore from '../store/LayoutStore';

export default function Layouts() {
    const collapsed = LayoutStore((state) => state.collapsed); // 折叠状态

    return (
        <div className='layouts'>
            <Layout>
                <Layout.Sider collapsed={collapsed}>
                    <LayoutSider />
                </Layout.Sider>
                <Layout>
                    <LayoutHeader />
                    <Layout.Content>
                        <Content />
                    </Layout.Content>
                </Layout>
            </Layout>
        </div>
    );
}